<template>
  <div class="container">
    <el-form :model="loginForm" style="width: 500px">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" :label-width="formLabelWidth">
        <el-input
            v-model="loginForm.code"
            auto-complete="off"
            style="width: 63%"
        >
          <!-- @keyup.enter.native="handleLogin" -->
          <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon"
          />
        </el-input>
        <div class="login-code" style="width: 33%; height: 38px; float: right">
          <img
              :src="codeUrl"
              style="cursor: pointer; vertical-align: middle; height: 38px"
              @click="getCode"
              class="login-code-img"
              alt="1"
          />
        </div>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" @click="userLogin(loginForm)"
        >登 入
        </el-button
        >
        &nbsp;
        <el-link :underline="false" type="primary" @click="dialogReg()"
        >注册
        </el-link
        >
        &nbsp;
        <el-link :underline="false" type="primary">忘记密码</el-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'Login',
  data() {
    return {
      activeIndex: "1",

      //图片
      codeUrl: "",

      //登录表单
      loginForm: {
        username: "",
        password: "",
        code: "",
        uuid: "",
      },

      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    //执行登录
    async userLogin(loginForm) {
      let flag = await this.$store.dispatch("user/reqUserLogin", loginForm);

      if (flag.code === 200) {
        //登录的路由组件：看路由当中是否包含query参数，有：调到query参数指定路由，没有：调到home
        let toPath = this.$route.query.redirect || "/home";
        this.$router.push(toPath);
      } else {
        this.$message({
          showClose: true,
          message: flag.msg || "登录失败",
          type: "error",
          offset: "70",
        });
        this.getCode();
      }
    },

    // 跳转到注册页面
    dialogReg() {
      this.$router.push("/register");
      this.getCode();
    },

    //获取验证码
    async getCode() {
      await this.$store.dispatch("user/getCodeImg");
      this.codeUrl = "data:image/gif;base64," + this.codeImgData.img;
      this.loginForm.uuid = this.codeImgData.uuid;
    },
  },
  computed: {
    //获取图片
    ...mapState("user", ["codeImgData"]),
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 100px;

  padding: 24px;
  margin-bottom: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  height: inherit;
  background-color: #fff;
}
</style>